<template>
  <div class="delete-message">
    <div @click="dialogVisible = true" class="delete">删除</div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认删除该商品？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" @click="deleteMessageClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deleteKnowledgeById} from "@/api/knowledge";
/*作用
inject: ["reload"] 意味着
当前组件会尝试从其祖先组件那里注入一个名为 reload 的属性。
reload 可以是数据，也能是方法。
借助这种方式，组件无需通过 props 层层传递数据，
就能直接使用祖先组件提供的内容。
使用场景
在组件嵌套层级较深的情况下，
若要把某个数据或方法从顶层组件传递到深层子组件，
使用 props 层层传递会让代码变得复杂且难以维护。
此时，provide 和 inject 就能派上用场，简化数据传递过程。*/
export default {
  inject: ["reload"],
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    deleteMessageClick() {
      this.dialogFormVisible = false;
      deleteKnowledgeById({
        knowledgeId: this.$store.state.changedKnowledgeId,
      })
          .then((res) => {
            this.reload();
            alert("删除成功");
          })
          .catch((err) => {
            alert("删除失败");
          });
    },
  },
};
</script>

<style lang="less" scoped>
.delete-message {
  .delete {
    height: 25px;
    cursor: pointer;
    margin-right: 10px;
    color: #67C23A;

    &:hover {
      color: #035D1C;
    }
  }
}
</style>